<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blue Code</title>
    
    <!-- 立即设置背景色，避免白色闪烁 -->
    <style>
      html, body {
        background-color: #1e1e1e !important;
        margin: 0;
        padding: 0;
        height: 100vh;
        overflow: hidden;
      }
      /* 只设置基本背景色，不覆盖图标颜色 */
      .vscode-container {
        background-color: #1e1e1e !important;
      }
    </style>
    
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="/main.js" defer></script>
    <script>
      // 立即测试Tauri API
      console.log('=== Tauri API 测试开始 ===');
      console.log('window.__TAURI__:', window.__TAURI__);
      console.log('window.__TAURI__.core:', window.__TAURI__?.core);
      console.log('window.__TAURI__.core.invoke:', window.__TAURI__?.core?.invoke);
    </script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  </head>

  <body>
    <!-- 加载遮罩 -->
    
    
    <div class="vscode-container">
      <!-- Windows风格标题栏 -->
      <div class="title-bar">
        <div class="title-bar-left">
          <div class="app-icon">
            <i class="fas fa-code"></i>
          </div>
          <div class="title-content">
            <span class="app-title">Blue Code</span>
            <span class="file-name"></span>
          </div>
        </div>
        <div class="title-bar-center">
          <div class="title-bar-actions">
            <i class="fas fa-search" title="搜索"></i>
            <i class="fas fa-cog" title="设置"></i>
            <i class="fas fa-question-circle" title="帮助"></i>
          </div>
        </div>
        <div class="title-bar-right">
          <div class="window-controls">
            <div class="window-control minimize" title="最小化">
              <i class="fas fa-window-minimize"></i>
            </div>
            <div class="window-control maximize" title="最大化">
              <i class="fas fa-window-maximize"></i>
            </div>
            <div class="window-control close" title="关闭">
              <i class="fas fa-times"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 顶部菜单栏 -->
      <div class="menu-bar">
        <div class="menu-item" data-menu="file">
          <span>文件</span>
          <div class="menu-dropdown" id="file-menu">
            <div class="menu-dropdown-item" data-action="new-file">
              <span>新建文件</span>
              <span class="shortcut">Ctrl+N</span>
            </div>
            <div class="menu-dropdown-item" data-action="open-file">
              <span>打开文件...</span>
              <span class="shortcut">Ctrl+O</span>
            </div>
            <div class="menu-dropdown-item" data-action="open-folder">
              <span>打开文件夹...</span>
              <span class="shortcut">Ctrl+K Ctrl+O</span>
            </div>
            <div class="menu-separator"></div>
            <div class="menu-dropdown-item" data-action="save">
              <span>保存</span>
              <span class="shortcut">Ctrl+S</span>
            </div>
            <div class="menu-dropdown-item" data-action="save-as">
              <span>另存为...</span>
              <span class="shortcut">Ctrl+Shift+S</span>
            </div>
            <div class="menu-separator"></div>
            <div class="menu-dropdown-item" data-action="exit">
              <span>退出</span>
            </div>
          </div>
        </div>
        
        <div class="menu-item" data-menu="edit">
          <span>编辑</span>
          <div class="menu-dropdown" id="edit-menu">
            <div class="menu-dropdown-item" data-action="undo">
              <span>撤销</span>
              <span class="shortcut">Ctrl+Z</span>
            </div>
            <div class="menu-dropdown-item" data-action="redo">
              <span>重做</span>
              <span class="shortcut">Ctrl+Y</span>
            </div>
            <div class="menu-separator"></div>
            <div class="menu-dropdown-item" data-action="cut">
              <span>剪切</span>
              <span class="shortcut">Ctrl+X</span>
            </div>
            <div class="menu-dropdown-item" data-action="copy">
              <span>复制</span>
              <span class="shortcut">Ctrl+C</span>
            </div>
            <div class="menu-dropdown-item" data-action="paste">
              <span>粘贴</span>
              <span class="shortcut">Ctrl+V</span>
            </div>
            <div class="menu-separator"></div>
            <div class="menu-dropdown-item" data-action="find">
              <span>查找</span>
              <span class="shortcut">Ctrl+F</span>
            </div>
            <div class="menu-dropdown-item" data-action="replace">
              <span>替换</span>
              <span class="shortcut">Ctrl+H</span>
            </div>
          </div>
        </div>
        
        <div class="menu-item" data-menu="selection">
          <span>选择</span>
          <div class="menu-dropdown" id="selection-menu">
            <div class="menu-dropdown-item" data-action="select-all">
              <span>全选</span>
              <span class="shortcut">Ctrl+A</span>
            </div>
            <div class="menu-dropdown-item" data-action="expand-selection">
              <span>扩展选择</span>
              <span class="shortcut">Shift+Alt+→</span>
            </div>
            <div class="menu-dropdown-item" data-action="shrink-selection">
              <span>缩小选择</span>
              <span class="shortcut">Shift+Alt+←</span>
            </div>
          </div>
        </div>
        
        <div class="menu-item" data-menu="view">
          <span>查看</span>
          <div class="menu-dropdown" id="view-menu">
            <div class="menu-dropdown-item" data-action="toggle-sidebar">
              <span>切换侧边栏</span>
              <span class="shortcut">Ctrl+B</span>
            </div>
            <div class="menu-dropdown-item" data-action="toggle-terminal">
              <span>切换终端</span>
              <span class="shortcut">Ctrl+`</span>
            </div>
            <div class="menu-separator"></div>
            <div class="menu-dropdown-item" data-action="zoom-in">
              <span>放大</span>
              <span class="shortcut">Ctrl+=</span>
            </div>
            <div class="menu-dropdown-item" data-action="zoom-out">
              <span>缩小</span>
              <span class="shortcut">Ctrl+-</span>
            </div>
            <div class="menu-dropdown-item" data-action="reset-zoom">
              <span>重置缩放</span>
              <span class="shortcut">Ctrl+0</span>
            </div>
          </div>
        </div>
        
        <div class="menu-item" data-menu="run">
          <span>运行</span>
          <div class="menu-dropdown" id="run-menu">
            <div class="menu-dropdown-item" data-action="start-debugging">
              <span>开始调试</span>
              <span class="shortcut">F5</span>
            </div>
            <div class="menu-dropdown-item" data-action="start-without-debugging">
              <span>开始执行（不调试）</span>
              <span class="shortcut">Ctrl+F5</span>
            </div>
            <div class="menu-separator"></div>
            <div class="menu-dropdown-item" data-action="stop">
              <span>停止</span>
              <span class="shortcut">Shift+F5</span>
            </div>
            <div class="menu-dropdown-item" data-action="restart">
              <span>重启</span>
              <span class="shortcut">Ctrl+Shift+F5</span>
            </div>
          </div>
        </div>
        
        <div class="menu-item" data-menu="terminal">
          <span>终端</span>
          <div class="menu-dropdown" id="terminal-menu">
            <div class="menu-dropdown-item" data-action="new-terminal">
              <span>新建终端</span>
              <span class="shortcut">Ctrl+Shift+`</span>
            </div>
            <div class="menu-dropdown-item" data-action="split-terminal">
              <span>分割终端</span>
              <span class="shortcut">Ctrl+\</span>
            </div>
            <div class="menu-separator"></div>
            <div class="menu-dropdown-item" data-action="clear-terminal">
              <span>清空终端</span>
              <span class="shortcut">Ctrl+K</span>
            </div>
            <div class="menu-dropdown-item" data-action="kill-terminal">
              <span>终止终端</span>
              <span class="shortcut">Ctrl+Shift+K</span>
            </div>
          </div>
        </div>
        
        <div class="menu-item" data-menu="help">
          <span>帮助</span>
          <div class="menu-dropdown" id="help-menu">
            <div class="menu-dropdown-item" data-action="welcome">
              <span>欢迎</span>
            </div>
            <div class="menu-dropdown-item" data-action="documentation">
              <span>文档</span>
            </div>
            <div class="menu-separator"></div>
            <div class="menu-dropdown-item" data-action="about">
              <span>关于</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 主界面 -->
      <div class="main-content">
        <!-- 侧边栏 -->
        <div class="sidebar" id="sidebar">
          <!-- 活动栏 -->
          <div class="activity-bar">
            <div class="activity-item active" data-panel="explorer" title="资源管理器">
              <i class="fas fa-folder"></i>
            </div>
            <div class="activity-item" data-panel="search" title="搜索">
              <i class="fas fa-search"></i>
            </div>
            <div class="activity-item" data-panel="git" title="源代码管理">
              <i class="fab fa-git-alt"></i>
            </div>
            <div class="activity-item" data-panel="debug" title="运行和调试">
              <i class="fas fa-bug"></i>
            </div>
            <div class="activity-item" data-panel="extensions" title="扩展">
              <i class="fas fa-puzzle-piece"></i>
            </div>
          </div>

          <!-- 侧边栏面板 -->
          <div class="sidebar-panels">
            <!-- 资源管理器面板 -->
            <div class="sidebar-panel active" id="explorer-panel">
              <div class="panel-header">
                <span>资源管理器</span>
                <div class="panel-actions">
                  <i class="fas fa-plus" title="新建文件"></i>
                  <i class="fas fa-folder-plus" title="新建文件夹"></i>
                  <i class="fas fa-sync" title="刷新"></i>
                </div>
              </div>
              <div class="file-explorer" id="file-explorer">
                <div class="no-folder-message">
                  <i class="fas fa-folder-open"></i>
                  <p>没有打开的文件夹</p>
                  <button class="open-folder-btn">打开文件夹</button>
                </div>
              </div>
            </div>

            <!-- 搜索面板 -->
            <div class="sidebar-panel" id="search-panel">
              <div class="panel-header">
                <span>搜索</span>
              </div>
              <div class="search-content">
                <div class="search-input-container">
                  <input type="text" placeholder="搜索文件..." class="search-input">
                  <i class="fas fa-search"></i>
                </div>
                <div class="search-results">
                  <p>输入搜索内容</p>
                </div>
              </div>
            </div>

            <!-- Git面板 -->
            <div class="sidebar-panel" id="git-panel">
              <div class="panel-header">
                <span>源代码管理</span>
              </div>
              <div class="git-content">
                <p>Git功能待实现</p>
              </div>
            </div>

            <!-- 调试面板 -->
            <div class="sidebar-panel" id="debug-panel">
              <div class="panel-header">
                <span>运行和调试</span>
              </div>
              <div class="debug-content">
                <p>调试功能待实现</p>
              </div>
            </div>

            <!-- 扩展面板 -->
            <div class="sidebar-panel" id="extensions-panel">
              <div class="panel-header">
                <span>扩展</span>
              </div>
              <div class="extensions-content">
                <p>扩展功能待实现</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 侧边栏调整器 -->
        <div class="sidebar-resizer" id="sidebar-resizer"></div>

        <!-- 编辑器区域 -->
        <div class="editor-container">
          <!-- 标签栏 -->
          <div class="tab-bar" id="tab-bar">
            <div class="tab-scroll-left" id="tab-scroll-left" title="向左滚动">
              <i class="fas fa-chevron-left"></i>
            </div>
            <div class="tab-scroll-container">
              <div class="tab-list" id="tab-list">
                <!-- 标签将在这里动态生成 -->
              </div>
            </div>
            <div class="tab-scroll-right" id="tab-scroll-right" title="向右滚动">
              <i class="fas fa-chevron-right"></i>
            </div>
            <div class="tab-actions">
              <i class="fas fa-plus" title="新建文件"></i>
            </div>
          </div>

          <!-- 编辑器 -->
          <div class="editor-area">
            <div class="line-numbers" id="line-numbers"></div>
            <div class="editor-wrapper">
              <div class="code-content">
                <pre id="code-editor" class="code-editor" contenteditable="true" placeholder="开始编写代码..."><code class="language-plaintext"></code></pre>
              </div>
            </div>
            <!-- 欢迎语句区域 -->
            <div class="welcome-message" id="welcome-message">
              <div class="welcome-content">
                <i class="fas fa-code"></i>
                <h2>欢迎使用 <span class="app-name">Blue Code</span></h2>
                <p>开始您的编程之旅</p>
              </div>
            </div>
          </div>

          <!-- 终端调整器 -->
          <div class="terminal-resizer" id="terminal-resizer"></div>

          <!-- 终端区域 -->
          <div class="terminal-container" id="terminal-container">
            <div class="terminal-header">
              <span class="terminal-title">
                <i class="fas fa-terminal"></i>
                终端
              </span>
            </div>
            <div class="terminal-output" id="terminal-output">
              <div class="terminal-line">
                <span class="terminal-prompt">$ </span>
                <span class="terminal-text">欢迎使用 Blue Code 终端</span>
              </div>
            </div>
            <div class="terminal-input-line">
              <span class="terminal-prompt">$ </span>
              <input type="text" class="terminal-input" id="terminal-input" placeholder="输入命令...">
            </div>
          </div>
        </div>
      </div>

      <!-- 状态栏 -->
      <div class="status-bar">
        <div class="status-left">
          <span class="status-item">
            <i class="fas fa-code"></i>
            <span id="language-indicator">纯文本</span>
          </span>
          <span class="status-item">
            <i class="fas fa-keyboard"></i>
            <span id="encoding-indicator">UTF-8</span>
          </span>
          <span class="status-item">
            <i class="fas fa-ruler"></i>
            <span id="line-indicator">行 1，列 1</span>
          </span>
        </div>
        <div class="status-right">
          <span class="status-item">
            <i class="fas fa-clock"></i>
            <span id="time-indicator">--:--</span>
          </span>
          <span class="status-item">
            <i class="fas fa-signal"></i>
            <span id="connection-indicator">已连接</span>
          </span>
        </div>
      </div>
    </div>

    <!-- 标签页上下文菜单 -->
    <div class="context-menu" id="tab-context-menu">
      <div class="context-menu-item" data-action="close">
        <i class="fas fa-times"></i>
        <span>关闭</span>
      </div>
      <div class="context-menu-item" data-action="close-others">
        <i class="fas fa-times-circle"></i>
        <span>关闭其他</span>
      </div>
      <div class="context-menu-item" data-action="close-all">
        <i class="fas fa-times-circle"></i>
        <span>关闭所有</span>
      </div>
      <div class="context-menu-separator"></div>
      <div class="context-menu-item" data-action="copy-path">
        <i class="fas fa-copy"></i>
        <span>复制路径</span>
      </div>
      <div class="context-menu-item" data-action="copy-name">
        <i class="fas fa-copy"></i>
        <span>复制文件名</span>
      </div>
      <div class="context-menu-separator"></div>
      <div class="context-menu-item" data-action="reveal-in-explorer">
        <i class="fas fa-folder"></i>
        <span>在资源管理器中显示</span>
      </div>
      <div class="context-menu-item" data-action="open-external">
        <i class="fas fa-external-link-alt"></i>
        <span>使用外部程序打开</span>
      </div>
      <div class="context-menu-separator"></div>
      <div class="context-menu-item" data-action="pin">
        <i class="fas fa-thumbtack"></i>
        <span>固定标签</span>
      </div>
      <div class="context-menu-item" data-action="duplicate">
        <i class="fas fa-copy"></i>
        <span>复制标签</span>
      </div>
    </div>

    <!-- 文件上下文菜单 -->
    <div class="context-menu" id="file-context-menu">
      <div class="context-menu-item" data-action="open">
        <i class="fas fa-folder-open"></i>
        <span>打开</span>
      </div>
      <div class="context-menu-item" data-action="open-external">
        <i class="fas fa-external-link-alt"></i>
        <span>使用外部程序打开</span>
      </div>
      <div class="context-menu-separator"></div>
      <div class="context-menu-item" data-action="copy-path">
        <i class="fas fa-copy"></i>
        <span>复制路径</span>
      </div>
      <div class="context-menu-item" data-action="copy-name">
        <i class="fas fa-copy"></i>
        <span>复制文件名</span>
      </div>
      <div class="context-menu-separator"></div>
      <div class="context-menu-item" data-action="reveal-in-explorer">
        <i class="fas fa-folder"></i>
        <span>在资源管理器中显示</span>
      </div>
      <div class="context-menu-separator"></div>
      <div class="context-menu-item" data-action="rename">
        <i class="fas fa-edit"></i>
        <span>重命名</span>
      </div>
      <div class="context-menu-item" data-action="delete">
        <i class="fas fa-trash"></i>
        <span>删除</span>
      </div>
    </div>

    <div class="context-menu" id="editor-context-menu">
      <div class="context-menu-item" data-action="cut">
        <i class="fas fa-cut"></i>
        <span>剪切</span>
      </div>
      <div class="context-menu-item" data-action="copy">
        <i class="fas fa-copy"></i>
        <span>复制</span>
      </div>
      <div class="context-menu-item" data-action="paste">
        <i class="fas fa-paste"></i>
        <span>粘贴</span>
      </div>
      <div class="context-menu-separator"></div>
      <div class="context-menu-item" data-action="select-all">
        <i class="fas fa-mouse-pointer"></i>
        <span>全选</span>
      </div>
      <div class="context-menu-separator"></div>
      <div class="context-menu-item" data-action="find">
        <i class="fas fa-search"></i>
        <span>查找</span>
      </div>
      <div class="context-menu-item" data-action="replace">
        <i class="fas fa-exchange-alt"></i>
        <span>替换</span>
      </div>
    </div>

    <!-- 关于对话框 -->
    <div class="modal-overlay" id="about-modal">
      <div class="modal-dialog">
        <div class="modal-header">
          <h3>关于 Blue Code</h3>
          <button class="modal-close" id="about-modal-close">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-content">
          <div class="about-content">
            <div class="about-logo">
              <i class="fas fa-code"></i>
            </div>
            <div class="about-info">
              <h2>Blue Code</h2>
              <p class="version">版本: 0.1.0</p>
              <p class="description">一个现代化的轻量级代码编辑器</p>
              <p class="author">作者: asfgjkzxvbm</p>
              <p class="tauri">Tauri: 2.x</p>
              <p class="rust">Rust: 2021 Edition</p>
              <p class="frontend">前端: HTML5, CSS3, JavaScript</p>
              <p class="identifier">标识符: com.bluecode.app</p>
              <p class="category">类别: DeveloperTool</p>
              <div class="about-copyright">
                <p>&copy; 2025 Blue Code. 保留所有权利。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>
